// class obj {
//     constructor(a){
//         this.a = a
//     }

//     // 方法
//     testa (){
//         console.log('testa')
//     }
// }
// const r =  new obj(1)
// // console.log(r.a)
// console.log(r)
import React from 'react'
// export class App extends React.Component {
//     constructor() {
//         super(); // 必须首先调用 super()，并传递 props
//                  // 在这里可以安全地使用 this 关键字
//         // console.log(this) // APP实例
//         this.state = {
//             name: '李华'
//         }
//         this.editname2 = this.editname2.bind(this)
//         console.log('hello constructor')
//     }
//     editname1(){
//         console.log(this) // undefined
//     }
//     editname2(){
//         console.log(this) // App 比如执行 this.setState 函数，就必须拿到当前对象的this
//         this.setState({
//             name: '李忠'
//         })
//     }
//     componentDidMount(){
//         // 在组件挂载后（插入 DOM 树中）立即调用
//         console.log('hello componentDidMount')

//     }
//     componentDidUpdate(){
//         // 更新后会被立即调用，首次渲染不会执行此方法
//         console.log('hello componentDidUpdate')

//     }
//     componentWillUnmount(){
//         console.log('hello componentWillUnmount')

//     }
//     render() {
//         console.log('hello render')
//         return (
//             <div>
//                 <h2>className: {this.state.name}</h2>
//                 <button onClick={this.editname1}>editName1</button>
//                 <button onClick={this.editname2}>editName2</button>

//             </div>


//         )
//     }

// }
import { useState } from "react"

export function App() {
    const [name, setName] = useState('李华');

    const editname1 = () => {
        setName('李忠')
    }

    return (
        // jsx
        <div>
            函数组件
            <h2>className: {name}</h2>
            <button onClick={editname1}>editName1</button>
        </div>
    )
}